<template>
  <view>
    <view v-for="(item, index) in list" :key="index">
      <!-- <view v-if="index === list.length - 1">
        
      </view> -->
      <view>
        <view class="flex flex-ai-c flex-ai-c">
          <u-icon
            v-if="item.iconName"
            :name="item.iconName"
            :color="index <= current ? iconColor : '#D0D0D0'"
            size="34rpx"
          ></u-icon>
          <view
            v-else
            class="default-icon"
            :class="index <= current ? 'icon-active' : 'icon-un-active'"
          ></view>

          <view class="name pl-20 font-28 color-333 flex flex-ai-c flex-jc-sb">
            <view class="flex-1">{{ item.name }}</view>
            <view v-if="item.number">{{ item.number }}</view>
          </view>
        </view>
        <view class="flex line-wrap">
          <u-line
            v-if="index !== list.length - 1"
            direction="col"
            length="70rpx"
            margin="0 17rpx"
            border-style="dotted"
            :hair-line="false"
            :color="index <= current ? activeColor : unActiveColor"
          ></u-line>
          <view class="sub-name font-22 color-999 flex flex-ai-c">
            <view v-if="item.percent" class="flex-1 progress">
              <u-line-progress
                active-color="#41CB05"
                :percent="item.percent"
                :show-percent="false"
                height="20"
              ></u-line-progress>
            </view>

            <text>{{ item.subName }}</text></view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    // 步骤条的数据
    list: {
      type: Array,
      default() {
        return [];
      },
    },

    // 当前哪一步是激活的
    current: {
      type: [Number, String],
      default: 0,
    },

    //结束icon
    iconName: {
      type: String,
      default: "checkmark-circle-fill",
    },

    //结束icon颜色
    iconColor: {
      type: String,
      default: "#41CB05",
    },

    // 激活步骤的颜色
    activeColor: {
      type: String,
      default: "#41cb05",
    },
    // 未激活的颜色
    unActiveColor: {
      type: String,
      default: "#D0D0D0",
    },
  },
};
</script>
<style lang="scss" scoped>
.default-icon {
  width: 22rpx;
  height: 22rpx;
  margin: 6rpx;
  border-radius: 50%;
}
.icon-un-active {
  background: #d0d0d0;
}

.icon-active {
  background: #41cb05;
}

.active-color {
  color: #41cb05;
}

.un-active-color {
  color: #d0d0d0;
}
.font-22 {
  font-size: 22rpx;
  transform: scale(0.9);
}
.pl-20 {
  padding-left: 15rpx;
}

.line-wrap {
  position: relative;
}

.name {
  width: 100%;
  font-weight: 500;
}

.sub-name {
  position: absolute;
  left: 32rpx;
  top: -15rpx;
  right: 0;

  .progress {
    padding-right: 20rpx;
  }
}
</style>
